import React, {
  FC, useContext,
} from 'react';
import classNames from 'classnames';

import { TabsContext } from './tabs';

export interface ITabPaneProps {
  tab: string;
  tabIndex: string;
  defaultActiveKey?: string;
  className?: string;
  disabled?: boolean;
  onClick?: (index: string) => void;
  children?: any; // HTMLElement | ReactElement | string;
}

const TabPane: FC<ITabPaneProps> = (props) => {
  const {
    tabIndex,
    className,
    tab,
    children,
    disabled,
    onClick = (index: string) => {},
    ...rest
  } = props;

  const context = useContext(TabsContext); 

  const classes = classNames('tabPane', className, {
    'is-disabled': disabled,
    'is-active': tabIndex === context.activeIndex,
    'tabpane-card': context.type === 'card',
  });

  const handleClick = (index: string) => {
    if(onClick && typeof onClick === 'function') {
      onClick(index);
    }
  }

  return (
    <>
      <li
        key={tabIndex}
        className={classes}
        onClick={() => handleClick(tabIndex)}
        {...rest}
      >
        {tab}
      </li>
    </>
  )
};

TabPane.displayName = "TabPane";

export default TabPane;